<template>
	<view>
		<view class="fixed">
			<cu-custom :isBack="true" bgColor="bg-shadeTop text-white">
				<block slot="backText">返回</block>
				<block slot="content" >{{roominfo.name}}--{{roominfo.title}}</block>
			</cu-custom>
		</view>
		<view class="play_box" v-if="roominfo.livestatus==1">
			<live-player   :src="roominfo.playurl" mode="live" autoplay @statechange="statechange" @error="error" style="width:100vw; height: 100vh;" />
		</view>
		
		<view class="no_home">
			<view class="text-center" style="padding-top: 300rpx;" v-if="roominfo.livestatus==0">
				<image style="width: 281rpx;height: 230rpx;opacity: 0.6;" src="../../static/empty1.png" mode=""></image>
				<view class="text-gray padding-top-lg">
					主播不在线
				</view>
			</view>
		</view>
		
		<view class="console_box ">
			<view class="chat_bar bg-shadeBottom">
				<scroll-view scroll-y="true" style="height: 300rpx;color: #00FF02;" :scroll-top="topnum">
					<view class="" v-for="(item,index) in list " :key="index">
						{{item.code}}:{{item.msg}}
					</view>
				</scroll-view>
				
				<view class="likebtn" @tap="like">
					<like-button></like-button>
				</view>
				
				
				<view class="cu-bar input" style="z-index: 99999;">
					<view class="cu-avatar round" :style="{backgroundImage:'url('+userinfo.avatar+');'}"></view>
					<input  :adjust-position="true" class="solid-bottom" maxlength="100" cursor-spacing="10" v-model="message"></input>
					<!-- <view class="action">
						<text class="cuIcon-emojifill text-grey"></text>
					</view> -->
					<button class="cu-btn bg-purple shadow-blur" @click="sendMessage">发送</button>
				</view>
			</view>
			
		</view>
		<l-barrage ref="lBarrage"></l-barrage>
	</view>
</template>

<script>
	import lBarrage from '@/components/l-barrage/l-barrage.vue'
	import likeButton from '@/components/like-button/like-button.vue'
	import { mapState,mapMutations } from 'vuex';
	export default {
		computed: {
			...mapState(['userinfo','config'])
		},
		components: {likeButton,lBarrage},
		name: "basics",
		data() {
			return {
				lifeUrl:'',
				list: [
				],
				topnum:300,
				roominfo:false,
				message:'',
				likenum:0,
				
			};
		},
		onShow() {
			console.log("success")
		},
		onLoad(e) {
			
			if(e.query){
				this.roominfo = JSON.parse(decodeURIComponent(e.query))
				this.onSubscribe();
				var msg = '拉流地址'+this.roominfo.playurl;
				var nick = this.userinfo?this.userinfo.nickname:'游客'+Math.round(1000)
				var hello = "欢迎"+nick+"进入直播间"
				this.send({nick:'系统',content:hello})
				// this.$refs.lBarrage.add('系统:'+hello);
				// this.joinmsg('001',msg)
				this.getdetail(this.roominfo.id)
			}
		},
		methods:{
			scrollbtm(){
				this.topnum = this.topnum+10
			},
			joinmsg(code,msg){
				this.list.push({code,msg})
				
				this.scrollbtm()
			},
			statechange(e){
				console.log(e)
				this.joinmsg(e.detail.code,e.detail.message)
			},
			error(e){
				console.log(e)
			},
			getdetail(id){
				this.util.csAjax('/addons/live/api.room/detail',{id:id},(ret)=>{
					console.log(ret)
					this.roominfo = ret.data
				})
			},
			onSubscribe () {//订阅消息
				//订阅接收消息的通道
				this.goeasy.subscribe({
					channel: this.roominfo.id,
					onMessage:  (message)=> {
						console.log(message)
						var msg = JSON.parse(decodeURIComponent(message.content)) 
						this.joinmsg(msg.nick,msg.content)
						this.$refs.lBarrage.add(msg.nick+':'+msg.content);
						// this.$api.msg(msg.content)
						// self.unshiftMessage(message.content)
					},
					onSuccess:  ()=> {
						console.log("订阅成功")
					}
				});
			},
			unshiftMessage(content) {
				var formattedTime = new Date().formatDate("hh:mm");
				var message = formattedTime +" "+ content;
				this.messages.unshift(message);
			},
			sendMessage() {//发消息
				if(this.message.trim() != "") {
					var msg = {
						nick:this.userinfo.nickname,
						content:this.message
					}
					this.send(msg)
				}
			},
			send(msg){
				this.goeasy.publish({
					channel: this.roominfo.id,
					message: encodeURIComponent(JSON.stringify(msg)),
					onSuccess:  ()=> {
						this.message = ''; //清空发送消息内容
						console.log("send message success");
					},
					onFailed:  (error)=> {
						this.$api.msg('发送失败，请检查您的appkey和host配置.');
					}
				});
			},
			like(){
				if(this.likenum>10){
					this.likenum=0
					this.send({nick:'系统',content:this.userinfo.nickname+'点亮了喜欢'})
				}else{
					this.likenum= this.likenum+1
				}
			}
		}
	}
</script>

<style>
	page{
		width: 100vw;
	}
	.fixed {
		position: fixed;
		z-index: 9999;
	}
	.console_box{
		position: relative;
		width: 100%;
		height: 100vh;
		/* height: 300rpx; */
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		/* background-color: rgba(0,0,0,0.4); */
		
	}
	.chat_bar{
		position: absolute;
		width: 100%;
		bottom: 0;
	}
	.likebtn{
		position: absolute;
		right: 30rpx;
		width: 60rpx;
		height: 60rpx;
		bottom: 150rpx;
	}
	.play_box{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
	.no_home{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
	
	.cu-bar.input {
		background-color: rgba(0,0,0,0);
	
	}

</style>
